<template>
	<el-row class="userList">
		<el-col :span="24">
			<el-form label-position="left" :inline="true" ref="conditionForm" :model="conditionForm" label-width="70px">		
				<el-form-item label="系统编码">
					<el-select v-model="conditionForm.systemCode"  placeholder="===请选择===">
						<el-option v-for="item in options" :label="item.systemCode" :value="item.systemCode">
					    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模块名称">
					<!--<el-select v-model="conditionForm.moduleName"  placeholder="===请选择===">
						<el-option label="CCP" value="1"></el-option>
						<el-option label="EBIL" value="0"></el-option>
					</el-select>-->
					<el-input v-model="conditionForm.moduleName"></el-input>
				</el-form-item>
				<el-form-item label="用例名称">
					<el-input v-model="conditionForm.caseName"></el-input>
				</el-form-item>
				<el-button type="primary" @click="queryData" icon="search">查询</el-button>
			</el-form>
			<div class="grid-content">
				<div class="">
					<el-button @click="add" type="primary" size="small" icon="plus">新增</el-button>
					<el-button @click="modify" type="primary" size="small" icon="edit">修改</el-button>
					<el-button @click="deleteData" type="danger" size="small" icon="delete">删除</el-button>
				</div>

				<div class="data-list">
					<el-table :data="tableData" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
						<el-table-column inline-template width="55">
							<div>
								<label class="radio">
									<input type="radio" value="2" :data-index="$index" name="radio">
									<span class="dot"></span>
								</label>
							</div>
							</el-table-column>
						<el-table-column prop="systemCode" label="系统编码" width="100">
						</el-table-column>
						<el-table-column prop="systemName" label="系统名称"  width="100">
						</el-table-column>
						<el-table-column prop="moduleName" label="模块名称"  width="100">
						</el-table-column>
						<el-table-column prop="caseCode" label="用例编码"  width="100">
						</el-table-column>
						<el-table-column prop="caseName" label="用例名称"  width="150">
						</el-table-column>
						<el-table-column prop="description" label="功能描述" width="150">
						</el-table-column>
						<el-table-column prop="runCount" label="运行次数" width="100">
						</el-table-column>
						<el-table-column inline-template label="操作">
							<div>
								<el-row :gutter="20">
						        <el-button @click="addPage" :data-index="$index" type="text" size="small">编辑测试步骤</el-button>
								<el-upload class="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
								  <el-tooltip class="el-upload__tip" effect="dark" content="只能上传xls/xlsx文件，且不超过10M" placement="bottom">
								      <el-button type="text" @click="uploadData = true" size="small">导入测试数据</el-button>
								  </el-tooltip>
								</el-upload>
								</el-row>
							</div>
						</el-table-column>
					</el-table>

					<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="1" :page-sizes="[10,20, 50, 100]" :page-size="pageSize" layout="->,prev, pager, next, jumper, sizes,total" :total="totalSize">
					</el-pagination>
				</div>
			</div>
		</el-col>

		<!--新增-->
		<el-dialog :title="title" v-model="addCase" size="tiny">
			<el-form :model="userForm" :rules="rules" ref="userForm">
				<el-form-item label="系统编码" :label-width="formLabelWidth">
					<el-select :disabled="disabled" v-model="userForm.systemCode"  placeholder="===请选择===" @change="selectSysName">
					<el-option 
				      v-for="item in options"
				      :key="item.systemCode"
				      :label="item.systemCode"
				      :value="item.systemCode">
				    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="systemName" label="系统名称" :label-width="formLabelWidth">
					<el-input :disabled="true" v-model="userForm.systemName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="moduleName" label="模块名称" :label-width="formLabelWidth" >
					<el-select :disabled="disabled" v-model="userForm.moduleName"  placeholder="===请选择===" @change="selectModuleName">
						<el-option 
					      v-for="item in options" :label="item.moduleName" :value="item.moduleName">
					    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="caseCode" label="用例编码" :label-width="formLabelWidth">
					<el-input :disabled="disabled" v-model="userForm.caseCode" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="caseName" label="用例名称" :label-width="formLabelWidth">
					<el-input v-model="userForm.caseName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="description" label="功能描述" :label-width="formLabelWidth">
					<el-input type="textarea" :rows="2" v-model="userForm.description" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="runCount" label="运行次数" :label-width="formLabelWidth">
					<el-input v-model="userForm.runCount" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submitForm('userForm')">保 存</el-button>
			</div>
		</el-dialog>
		<!--修改-->
		<el-dialog :title="title" v-model="modifyCase" size="tiny">
			<el-form :model="userForm" :rules="rules" ref="userForm">
				<el-form-item label="系统编码" :label-width="formLabelWidth">
					<el-select :disabled="disabled" v-model="userForm.systemCode"  placeholder="===请选择===" @change="selectSysName">
					<el-option 
				      v-for="item in options"
				      :key="item.systemCode"
				      :label="item.systemCode"
				      :value="item.systemCode">
				    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="systemName" label="系统名称" :label-width="formLabelWidth">
					<el-input :disabled="true" v-model="userForm.systemName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="moduleName" label="模块名称" :label-width="formLabelWidth" >
					<el-select :disabled="disabled" v-model="userForm.moduleName"  placeholder="===请选择===" @change="selectModuleName">
						<el-option 
					      v-for="item in options" :label="item.moduleName" :value="item.moduleName">
					    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="caseCode" label="用例编码" :label-width="formLabelWidth">
					<el-input :disabled="disabled" v-model="userForm.caseCode" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="caseName" label="用例名称" :label-width="formLabelWidth">
					<el-input v-model="userForm.caseName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="description" label="功能描述" :label-width="formLabelWidth">
					<el-input type="textarea" :rows="2" v-model="userForm.description" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="runCount" label="运行次数" :label-width="formLabelWidth">
					<el-input v-model="userForm.runCount" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="modifyData">确 定</el-button>
			</div>
		</el-dialog>
	</el-row>
		
</template>

<script>
	import {
		Message
	} from 'element-ui';
	import {
		Notification
	} from 'element-ui';

	export default {
		data() {

				var vSystemCode = (rule, value, callback) => {
					if(value === '') {
						callback(new Error('请输入系统编码'));
					} else {
						callback();
					}
				};
				return {
					conditionForm: {
						systemCode: '',
						moduleName: '',
						caseName: ''
					},
					pickerOptions: {
						disabledDate(time) {
							return time.getTime() < Date.now() - 8.64e7;
						}
					},
					userForm: {
						id: '',
						sortID:'',
						systemId: '',
						moduleId: '',
						versionNo: '',
						systemCode:'',
						systemName:'',
						moduleName:'',
						caseCode:'',
						caseName:'',
						description:'',
						toolType:'',
						runCount:''
					},
					fileList: [],
					caseName:'',
					description:'',
					runCount:'',
					id:'',
					tableData: [],
					options:[],
					uploadData:false,
					exportCase:false,
					roleData: [],
					toolType:'',
					hasRoleData: [],
					currentRow: null,
					addCase: false,
					modifyCase:false,
					formLabelWidth: '100px',
					multipleSelection: [],
					moduleId:'',
					roleModel: '',
					props: {
						label: 'name',
						children: 'zones'
					},
					title: '',
					isShow: false,
					disabled: false,
					pageSize: 10,
					totalSize: 0,
					userId: '',
					defaultRole: '',
					rules: {
						systemCode: [{
							validator: vSystemCode,
							trigger: 'blur'
						}],
						caseName: [{
							message: '请输入用例名称',
							required: true,
							trigger: 'blur'
						}],
						runCount: [{
							required: true,
							message: '请输入运行次数',
							trigger: 'blur'
						},]
					}
				}
			},
			methods: {
				getPageData(param) {

					if(!param || param == {}) {
						var param = {}
					}
					if(!param.hasOwnProperty("pageSize")) {
						param.pageSize = this.pageSize
					}
					if(!param.hasOwnProperty("start")) {
						param.start = 0
					}
					this.$httpExt().get('/testCase/list',
							param
						)
						.then((response) => {
							var body = response.result
							this.totalSize = body.length
							this.tableData = body
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				initPageData(){
					this.$httpExt().get('/testCase/sysModSelect')
						.then((response) => {
							var condition = response.result
							this.options = condition
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				selectSysName(value){
					this.userForm.systemCode = value				
					for(let [index, item] of this.options.entries()) {
						if(value == item.systemCode){
							this.userForm.systemName = item.systemName	
						}
					}
				},	
				selectModuleName(value){
					this.userForm.moduleName = value				
					for(let [index, item] of this.options.entries()) {
						if(value == item.moduleName){
							this.moduleId = item.moduleId	
						}
					}
				},
				addPage(){
					if(this.toolType == 1){
						this.$emit("page",'Selenium测试步骤','seleniumCase');
					}else{
						this.$emit("page",'QTP测试步骤','qtpCase');
					}
			      },
				queryData() {
					this.getPageData(this.conditionForm)
				},
				handleCurrentChange(val) {
					if(!val) {
						return
					}
					var that = this
					this.currentRow = val;
					this.id = val.id
					this.toolType = val.toolType
					this.userForm.systemName=val.systemName
					this.userForm.systemCode=val.systemCode
					this.userForm.moduleName=val.moduleName
					this.userForm.moduleId=val.moduleId
					this.userForm.caseCode=val.caseCode
					this.userForm.caseName=val.caseName
					this.userForm.description=val.description
					this.userForm.runCount=val.runCount
					setTimeout(function() {
						if(that.$el.querySelector("tr.current-row")) {
							var current = that.$el.querySelector("tr.current-row").querySelector("input[type=radio]")
							that.index = current.dataset.index
//							that.$store.state.global.name22=current.dataset.username
						}
					}, 30)
				},
				handleRemove(file, fileList) {
        			console.log(file, fileList);
			      },
			    handlePreview(file) {
			        console.log(file);
			     },
				add() {

					this.title = '新增测试用例'
					this.addCase = true
					this.userForm.systemCode=''
					this.userForm.systemName=''
					this.userForm.moduleName=''
					this.userForm.caseCode=''
					this.userForm.caseName=''
					this.userForm.description=''
					this.userForm.runCount=''
					this.disabled = false
					this.isShow = false

				},
				modify(){
					this.title = '修改测试用例'
					this.modifyCase = true
					this.disabled = true
					this.isShow = false
				},
				modifyData() {
					if(this.index >= 0) {
						this.$httpExt().get('/testCase/update', {
							'id': this.id,
							'moduleId':this.userForm.moduleId,
							'caseName':this.userForm.caseName,
							'caseCode':this.userForm.caseCode,
							'description':this.userForm.description,
							'runCount':this.userForm.runCount
						}).then((response) => {
							this.modifyCase = false
							var body = response
								Message({
									message: '修改成功!',
									type: 'success'
								});
//							data.typeCode == 1 ? this.isShow = false : this.isShow = true
//							this.disabled = true

						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});

					} else {
						Message({
							message: '请选择一条进行操作！',
							type: 'warning'
						});
					}
				},
				deleteData() {
					if(this.index) {
						this.$confirm('确定删除该配置吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$httpExt().get('/testCase/delete', {								
								'ids': this.id
							}).then((response) => {
								var body = response	
								this.tableData.splice(this.index, 1);
								this.index = ''
								Message({
									message: '删除成功!',
									type: 'success'
								});

							}, (response) => {
								Notification.error({
									title: '异常',
									message: response.msg
								})
							})

						}).catch(() => {

						});
					} else {
						Message({
							message: '请选择一条进行操作！',
							type: 'warning'
						});
					}

				},
				submitForm(form) {

					if(this.userForm.systemCode == "" || this.userForm.systemCode == null) {
						this.$refs[form].validate((valid) => {
							if(valid) {
								this.saveUser()
							} else {
								return false;
							}
						});
					} else {
						this.saveUser()
					}

				},
				saveUser() {
//					let params = "moduleId=" + this.moduleId;
//					params += "&caseName=" + this.userForm.caseName + "&description=" + this.userForm.description + "&runCount=" + this.userForm.runCount;
					this.$httpExt().get('/testCase/add',{						
						"moduleId" :this.moduleId,
						"caseCode" :this.userForm.caseCode,
						"caseName" :this.userForm.caseName,
						"description":this.userForm.description,
						"runCount":this.userForm.runCount
					}).then((response) => {
						debugger
						Message({
							message: '保存成功',
							type: 'success'
						});
					}, (response) => {
						Notification.error({
							title: '异常',
							message: response.msg
						})
					});

					this.addCase = false
				},
				cancel() {
					this.$refs.userForm.resetFields()
					this.addCase = false

				},
				formatterDate(row, column) {

					if(row.modifyTm) {
						return row.modifyTm.substring(0, 10)
					}
					if(row.deactiveTm) {
						return row.deactiveTm.substring(0, 10)
					}

				},
				
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				sizeChange(val) {
					var param = {
						pageSize: val
					}
					this.getPageData(param)
				},
				currentChange(val) {
					var start = (val - 1) * this.pageSize
					var param = {
						start: start
					}
					this.getPageData(param)
				},
				formatDateToString(date) {
					
					if(typeof date == 'object') {
						var year = date.getFullYear();
						var month = date.getMonth() + 1;
						var day = date.getDate();
						if(month < 10) month = "0" + month;
						if(day < 10) day = "0" + day;
						return year + '-' + month + '-' + day;
					} else if(typeof date == 'string') {
						return date.substring(0, 10)
					}

				}

			},
			mounted() {
				this.initPageData()
			}
	}
</script>

<style>
	.roleRadio {
		width: 15px;
		overflow: hidden;
		padding: 7px;
	}
</style>